<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<comment-list :lists="list"></comment-list>
			<comment-form @sendmsg="resivefromson"></comment-form>
			
		</div>
	
	
	
<!-- 每个评论组件 -->
	<template id="t1">
		<div>
			<!-- <img src="logo192.png" width="80" height="80" />
			<h3>kelly</h3>
			<p>持续超过警戒水位2米以上，近4万名群众</p>	
			<button>回复</button> -->
			
			<img src="logo192.png" width="80" height="80" />
			<h3>{{items.author}}</h3>
			<p>{{items.info}}</p>	
			<button>回复</button>
		</div>
	</template>
	
	<!-- 评论列表 -->
	
	<template id="t2">
	  <div>	
		<!-- <comment-item></comment-item>
		<comment-item></comment-item> -->
		<comment-item v-for="(item,index) in lists" :items="item" ></comment-item>
	  </div>
	</template>
	
	
	<template id="t3">
		<div>
			<textarea cols="30" rows="10" v-model="txt"></textarea>
			<input type="text" placeholder="请输入发布者名字" v-model="username"  />
			<button @click="send">发送</button>			
		</div>
	</template>
	
	
	<script>
	var CommentItem={
		template:"#t1",
		props:['items']
	}
	
	var CommentList={
		template:"#t2",
		components:{
			'comment-item':CommentItem
		},
		props:['lists']
	}	
	
	var CommentForm={
		template:"#t3",
		data(){
			return {
				txt:'',
				username:''
			}
		},
		methods:{
			send(){
				this.$emit('sendmsg',{author:this.username,info:this.txt})
			}
		}
		
	}	
	//状态提升
		var vm=new Vue({
			el:"#app",
			data:{
				list:[
					{
						author:'kelly',
						info:'月以来，受降雨和洪峰影响，江西省九江市江洲镇水'
					},
					{
						author:'lemo',
						info:'位持续超过警戒水位2米以上，近4万名群众'
					},
					{
						author:'lumi',
						info:'生命和财产安全受到威胁'
					}
				]
			},
			components:{
				"comment-list":CommentList,
				"comment-form":CommentForm
			},
			methods:{
				resivefromson(data){
					console.log(data);
					this.list.push(data)
				}
			}
			
		})
	</script>	
	</body>
</html>
